<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <title>Leon Sans examples</title>
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Leon Sans examples">
    <meta name="description" content="Leon Sans is a geometric sans-serif typeface made with code in 2019 by Jongmin Kim.">
    <meta itemprop="name" content="Leon Sans examples" />
    <meta itemprop="description" content="Leon Sans is a geometric sans-serif typeface made with code in 2019 by Jongmin Kim."/>
    <meta itemprop="image" content="https://leon-kim.com/img/share.png" />
    <meta property="og:site_name" content="Leon Sans examples" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Leon Sans examples" />
    <meta property="og:url" content="https://leon-kim.com" />
    <meta property="og:image" content="https://leon-kim.com/img/share.png" />
    <meta property="og:description" content="Leon Sans is a geometric sans-serif typeface made with code in 2019 by Jongmin Kim." />

    <style>
        html,
        body {
            outline: 0;
            margin: 0;
            padding: 0;
            height: 100%;
            color: #ffffff;
            font-size: 14px;
            line-height: 30px;
            -webkit-text-size-adjust: 100%;
            font-family: 'Helvetica', sans-serif;
            font-weight: 400;
        }

        #menu-m {
            position: fixed;
            z-index: 4;
            width: 60px;
            height: 56px;
            left: 0;
            top: 0;
            background-color: #222222;
            cursor: pointer;
        }

        #menu-m > p {
            display: block;
            width: 30px;
            height: 2px;
            background-color: #ffffff;
            position: absolute;
            left: 15px;
        }
        #menu-m > p:nth-child(1) {
            top: 5px;
        }
        #menu-m > p:nth-child(2) {
            top: 12px;
        }
        #menu-m > p:nth-child(3) {
            top: 19px;
        }

        #menu-bg {
            position: fixed;
            z-index: 2;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background-color:rgba(0,0,0,0.3);
            display: none;
        }

        #menu {
            position: fixed;
            z-index: 6;
            left: 0px;
            width: 170px;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            background-color: #222222;
        }
        #menu.show {
            transform: translate(170px, 0);
        }

        #header {
            margin: 0;
        }

        #version {
            font-size: 9px;
            line-height: 9px;
            color: rgba(255,255,255,0.5);
            padding: 0 0 0 20px;
        }

        #list {
            margin: -10px 0 20px 0;
        }

        h2 {
            font-size: 18px;
            font-weight: 400;
            margin: 40px 0 6px 0;
            padding: 0 0 0 20px;
        }

        h2 > a {
            font-size: 12px;
        }
        .item {
            padding: 0 0 0 20px;
            display: block;
        }

        .item:hover {
            opacity: 1;
            background-color: #000;
        }

        .item.selected {
            opacity: 1;
            background-color: #000;
        }

        a {
            color: #ffffff;
            opacity: 0.6;
            text-decoration: none;
        }

        #iframe {
            position: absolute;
            border: 0px;
            right: 0;
            right: 0;
            width: calc(100% - 170px);
            height: 100%;
            overflow: auto;
        }

        @media (max-width: 600px) {
            #iframe {
                width: 100%;
            }
            #menu {
                left: -170px;
            }
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
    <script src="../dist/leon.js"></script>
</head>

<body>
    <div id="menu-m">
        <p></p>
        <p></p>
        <p></p>
    </div>
    <div id="menu-bg"></div>
    <div id="menu">
        <canvas id="header"></canvas>
        <div id="version">VERSION 1.5</div>
        <div id="list">
            <h2>Canvas</h2>
            <a class="item" href="all.html" target="iframe">all</a>
            <a class="item" href="canvas-basic.html" target="iframe">basic</a>
            <a class="item" href="gradient.html" target="iframe">gradient</a>
            <a class="item" href="grid.html" target="iframe">grid</a>
            <a class="item" href="pattern.html" target="iframe">pattern</a>
            <a class="item" href="wave.html" target="iframe">wave</a>
            <a class="item" href="colorful.html" target="iframe">colorful</a>
            <a class="item" href="color-pattern.html" target="iframe">color pattern</a>
            <h2>WebGL <a href="https://www.pixijs.com/" target="_blank">(PIXI.js)</a></h2>
            <a class="item" href="webgl-basic-pixi.html" target="iframe">basic</a>
            <a class="item" href="metaball-pixi.html" target="iframe">metaball</a>
            <a class="item" href="morphing-pixi.html" target="iframe">morphing</a>
            <a class="item" href="plants-pixi.html" target="iframe">plants</a>
            <a class="item" href="mask-tiling-pixi.html" target="iframe">mask + tiling</a>
        </div>
    </div>
    <iframe id="iframe" name="iframe" allowfullscreen="" allowvr="" onmousewheel=""></iframe>

    <script>
        window.onload = () => {

            let isShow = false;
            const menuM = document.getElementById('menu-m');
            const menuBg = document.getElementById('menu-bg');
            const menu = document.getElementById('menu');
            menuM.addEventListener( 'click', (event) => {
                onClickMenu();
            });
            menuBg.addEventListener( 'click', (event) => {
                onClickMenu();
            });

            function onClickMenu() {
                isShow = !isShow;
                if (isShow) {
                    menuBg.style.display = 'block';
                    menu.className = 'show';
                } else {
                    menuBg.style.display = 'none';
                    menu.className = '';
                }
            }


            const sw = 170;
            const sh = 50;
            const iframe = document.getElementById('iframe');
            const canvas = document.getElementById('header');
            const ctx = canvas.getContext("2d");
            canvas.width = sw * 2;
            canvas.height = sh * 2;
            canvas.style.width = sw + 'px'
            canvas.style.height = sh + 'px'
            ctx.scale(2, 2);

            const leon = new LeonSans({
                text: 'Leon Sans',
                color: ['#ffffff'],
                size: 26,
                weight: 300
            });
            leon.on('update', (model) => {  
                ctx.clearRect(0, 0, sw, sh);
                leon.position(20, 20);
                leon.draw(ctx);
            });

            const list = document.getElementById('list');
            const arr = list.getElementsByClassName('item');
            const total = arr.length;
            const links = {};
            let cur = null;
            let i;
            for (i = 0; i < total; i++) {
                const vv = arr[i].href.split('/');
                const name = vv[vv.length - 1].split('.')[0];
                links[name] = arr[i];

                arr[i].addEventListener( 'click', (event) => {
                    const vv = event.target.href.split('/');
                    const name = vv[vv.length - 1].split('.')[0];
                    checkMenu(name);
                });
            }

            if (window.location.hash !== '') {
                const name = window.location.hash.substring(1);
                const url = name + '.html';
                iframe.src = url;
                checkMenu(name);
            } else {
                const name = 'all';
                iframe.src = name + '.html';
                checkMenu(name);
            }
            
            function checkMenu(name) {
                if (cur) links[cur].classList.remove('selected');
                cur = name;
                links[cur].classList.add('selected');
                window.location.hash = name;
                iframe.focus();
            };
        };
    </script>
</body>

</html>